<script lang="ts" setup>
//lang="ts" 表示当前文件为 TypeScript 文件
//setup 表示当前文件为 Vue3 的 组合式Api写法
// 当根组件被加载时，输出日志到控制台，以便开发者调试
console.log('根组件被加载了')
const msg:string ='Hello Vue 3'
const nickname:string ='张三'
const age:number =19

const clickHeandel=()=>{
  alert('点击了按钮')
}
const onMouseenter=()=>{
 console.log('鼠标进入')
}

const onMouseleave=()=>{
 console.log('鼠标离开')
}

</script>

<template>
  <!--template类似鸿蒙组件的build（）函数，用于构建界面-->
  <!-- 定义一个标题元素，用于显示页面的主标题 -->
  <h1 class="title">下午好 不好也下午了</h1>
  <p>{{msg}}</p>
  <p>{{ nickname.charAt(0) }}</p>
  <p>{{ age>=18?'已成年':'你还小' }}</p>
  <p>{{ hobby }}</p>

  <button @click="clickHeandel()">点我</button>

  <div class="box" @mouseenter="onMouseenter()" @mouseleave="onMouseleave()"></div>
</template>

<style>
/* 设置标题的样式，使其颜色为红色 */
/*scoped限制样式只对当前组件有效，避免样式冲突*/
.title {
  color: #F00;
}
.box{
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>